/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-14 17:15:35
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-17 13:36:51
 * @FilePath: /three-react/src/pages/Camera/Camera1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const state = {}
export default function Page() {
  
  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])



  function render(scene, camera, renderer) {
    camera.position.set(200, 100, 0);
    camera.lookAt(0,0,0)
    const loader = new GLTFLoader();
    loader.load('/public/factory.glb',function(model) {
      scene.add(model.scene)
    })

    const textureLoader = new THREE.TextureLoader();
    // const texture = textureLoader.load('/public/12/雨滴.png');
    const texture = textureLoader.load('/public/12/雪花.png');
    const material = new THREE.SpriteMaterial({
      map: texture
    })
   

    const group = new THREE.Group();

    for (let i = 0; i < 4000; i++) {
      const sprite = new THREE.Sprite(material);
      const x = 400*Math.random() - 200;
      const y = 200*Math.random();
      const z = 400*Math.random() - 200;
      sprite.position.set(x, y, z);
      group.add(sprite);
    }
    console.log('group', group)
    scene.add(group)


    function animate() {
      group.children.forEach(function(geometry) {
        const {x,y, z} = geometry.position
        if(y>=0) {
          const xOffset = 1 * Math.random() - 0.5;
          // const zOffset = 1 * Math.random() - 0.5;

          geometry.position.set(x+xOffset/2, y-1, z)
        }else {
          geometry.position.set(x, 200, z)
        }
        
      })
      renderer.render(scene, camera);
      requestAnimationFrame(animate)
    }
    animate();
  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}